<template>
	<view class="page">
		<!-- 头部区域 -->
		<view class="header">
			<view class="nav-bar">
				<text class="title">{{attractionInfo.name}}</text>
			</view>
			<!-- 轮播图 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="3000" duration="500">
				<swiper-item v-for="(item, index) in attractionInfo.photos" :key="index">
					<image :src="item.url" mode="aspectFill" class="swiper-image" />
				</swiper-item>
			</swiper>
			<!-- 关键信息卡片 -->
			<view class="info-card">
				<view class="score-section">
					<text class="score">{{attractionInfo.rating}}分</text>
					<!-- <text class="reviews">(12580条点评)</text> -->
				</view>
				<!-- <view class="price-section">
					<text class="price">¥80</text>
					<text class="unit">起</text>
				</view> -->
			</view>
		</view>
		<!-- 核心信息区 -->
		<scroll-view class="content" scroll-y>
			<view class="brief-intro">
				<text class="section-title">景点简介</text>
				<text class="intro-text">{{attractionInfo.detail.header}}</text>
			</view>
			<view class="basic-info">
				<view class="info-item">
					<uni-icons type="calendar" size="20" color="#666" />
					<text class="info-label">开放时间：</text>
					<text class="info-value">{{attractionInfo.detail.openTime}}</text>
				</view>
				<view class="info-item">
					<uni-icons type="location" size="20" color="#666" />
					<text class="info-label">地址：</text>
					<text class="info-value">{{attractionInfo.address}}</text>
				</view>
			</view>
			<!-- Tab栏目区域 -->
			<view class="tab-section">
				<scroll-view class="tab-scroll" scroll-x>
					<view class="tab-list">
						<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
							:class="{ active: currentTab === index }" @click="switchTab(index)">
							{{ tab }}
						</view>
					</view>
				</scroll-view>
				<view class="tab-content">
					<view v-show="currentTab === 0" class="detail-content">
						<text class="detail-text">{{attractionInfo.detail.intro}}</text>
					</view>
					<view v-show="currentTab === 1" class="detail-content">
						<text class="detail-text">{{attractionInfo.detail.projectIntro}}</text>
					</view>
					<view v-show="currentTab === 2" class="detail-content">
						<text class="detail-text">{{attractionInfo.detail.admissionNotice}}</text>
					</view>
					<view v-show="currentTab === 3" class="detail-content">
						<text class="detail-text">{{attractionInfo.detail.ticketPolicy}}</text>
					</view>
					<!-- <view v-show="currentTab === 1" class="detail-content">
						<view class="project-item" v-for="(project, index) in projects" :key="index">
							<text class="project-title">{{ project.title }}</text>
							<text class="project-desc">{{ project.desc }}</text>
						</view>
					</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	import {
		ref,
		onUnmounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import uniRequest from '@/components/request.js';
	let attractionInfo = ref({
		detail: {}
	})
	let senceId = ref(629453156671752);
	onLoad((options) => {
		senceId.value = options.id;
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getScenicInfo?id=' + senceId.value,
			method: 'GET',
			data: {},
			success(res) {
				const data = res.data.data
				attractionInfo.value = data

				if (data.photos == null || data.photos.length == 0) {
					attractionInfo.value.imageList = [{
						url: "/static/noneimage.jpg"
					}]
				} else {
					attractionInfo.value.photos = data.photos
				}

			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成1');
			}
		})
	})

	const saveScenicStayTime = () => {
		const milliseconds = performance.now();
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/saveScenicStayTime',
			method: 'POST',
			data: {
				"scenicId": senceId.value,
				"stayTime": milliseconds
			},
			success(res) {
				console.log(res)
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成1');
			}
		})
	}

	onUnmounted(() => {
		saveScenicStayTime()
	})

	const swiperList = [
		'https://ai-public.mastergo.com/ai/img_res/ed584e7359abca78efb9c15ac972e3bf.jpg',
		'https://ai-public.mastergo.com/ai/img_res/5148af31cc876bf784b200713ae896ca.jpg',
		'https://ai-public.mastergo.com/ai/img_res/79d33a3a3263472093dd0e38f747994a.jpg'
	];
	const currentTab = ref(0);
	const tabs = ['详细描述', '景点项目', '入园须知', '优惠信息'];
	const projects = [{
			title: '断桥残雪',
			desc: '西湖十景之一，是观赏西湖雪景的最佳去处。'
		},
		{
			title: '平湖秋月',
			desc: '西湖十景之一，可以欣赏到最美的西湖月色。'
		},
		{
			title: '苏堤春晓',
			desc: '西湖十景之一，春天时杨柳依依，景色宜人。'
		}
	];
	const switchTab = (index) => {
		currentTab.value = index;
	};
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.header {
		flex-shrink: 0;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #fff;
	}

	.back-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.title {
		margin-left: 20rpx;
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.swiper {
		width: 750rpx;
		height: 400rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.info-card {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.score-section {
		margin-bottom: 20rpx;
	}

	.score {
		font-size: 20px;
		color: #ff6b00;
		font-weight: bold;
	}

	.reviews {
		font-size: 14px;
		color: #999;
		margin-left: 10rpx;
	}

	.price-section {
		margin-bottom: 20rpx;
	}

	.price {
		font-size: 24px;
		color: #ff6b00;
		font-weight: bold;
	}

	.unit {
		font-size: 14px;
		color: #ff6b00;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.brief-intro {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.intro-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}

	.basic-info {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.info-item {
		// display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-label {
		font-size: 14px;
		color: #666;
		margin: 0 10rpx;
	}

	.info-value {
		font-size: 14px;
		color: #333;
	}

	.tab-section {
		background-color: #fff;
	}

	.tab-scroll {
		border-bottom: 1px solid #eee;
		height: 88rpx;
		white-space: nowrap;

		::-webkit-scrollbar {
			display: none;
		}
	}

	.tab-list {
		display: flex;
		padding: 0 30rpx;
		height: 88rpx;
	}

	.tab-item {
		padding: 0 30rpx;
		line-height: 88rpx;
		font-size: 14px;
		color: #666;
		position: relative;
		flex-shrink: 0;
	}

	.tab-item.active {
		color: #ff6b00;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		height: 2px;
		background-color: #ff6b00;
	}

	.tab-content {
		padding: 0 30rpx;
	}

	.detail-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}

	.project-item {
		margin-bottom: 30rpx;
	}

	.project-title {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		margin-bottom: 10rpx;
		display: block;
	}

	.project-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}
</style>